<template>
    <div>

        <div class="accounthead">
            <img src="../../assets/asawhole.png" alt="">
            <span>任务列表</span>
            <div class="newBtn" @click="tobatchFeature">+ 批量创建</div>
            <div class="newBtn newBtnL" @click="tonewFeature">+ 单独创建</div>
        </div>

        <div class="searchbox">
            <el-input placeholder="请输入公司名称" v-model="searchcon" class="input-with-select searchInput" @keyup.native.enter="searchbtn">
                <el-button slot="append" icon="el-icon-search" class="searchBtn" @click="searchbtn"></el-button>
            </el-input>
        </div>

        <div class="table">
             <el-table
                :data="finishList"
                stripe
                v-loading="loading"
                @row-click="toDetails"
                style="width: 100%">
                <el-table-column
                align="center"
                prop="id"
                label="ID"
                width="160">
                </el-table-column>
                <el-table-column
                prop="companyName"
                label="公司名称"
                width="480">
            </el-table-column>
            <el-table-column
                prop="module.name"
                label="搜索模块"
                width="380">
            </el-table-column>
            <el-table-column
                prop="insertTime"
                label="创建时间"
                width="280">
            </el-table-column>
            <el-table-column
                label="下载结果"
                align="center"
                width="180"
                >
                <i class="el-icon-download"></i>
                  <template slot-scope="scope">
                        <!-- {{scope.row.state | rowstate}} -->
                        <i class="el-icon-download" @click="downloadModule(scope.row.id)"></i>
                  </template>
            </el-table-column>
            <el-table-column>
            </el-table-column>
            </el-table>
        </div>

        <div class="pagebox">
            <div class="block">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage3"
                :page-size="10"
                layout="total, prev, pager, next, jumper"
                :total= pagetotal>
                </el-pagination>
            </div>
        </div>

       
    </div>
</template>

<script>
import { getFinishList } from '@/api'
export default {
    data () {
        return {
            searchcon: '',
            finishList: [],
            pagetotal: 1,
            currentPage3: 5,
            pagenum: 1,
            loading: true
        }
    },
    created () {
        this.initFinishList()
    },
    methods: {
         // 点击进入表格详情
        toDetails(row) {
            // console.log(row)
            this.$router.push({path: '/taskdetail', query: {id: row.id}})
        },
        // 下载模板
        downloadModule(id) {
            // console.log(id)
            window.open("http://dy.6soft.com:8080/task/download/"+id+"/xlsx") 
        },
        // ckj 跳转到新建任务
        tonewFeature() {
            this.$router.push({path: '/newFeature'})
        },
        // ckj 跳转到批量创建任务
        tobatchFeature() {
            this.$router.push({path: '/newFiveFeature'})
        },
        // ckj 点击按钮跳转页面
         handleSizeChange(val) {
        },
        handleCurrentChange(val) {
            this.pagenum = val
            this.loading = false
            this.initFinishList()
        },
        initFinishList (){
            // 用pageNum,pageSize获取已完成任务列表
            let obj = {
                pageNum: this.pagenum,
                pageSize: 10,
                companyName: this.searchcon
            }
            getFinishList(obj)
            .then(res => {
                if(res.statusCode ===200) {
                //  console.log(res)
                 this.finishList = res.data.list
                //  console.log( this.finishList.template.updateTime)
                 this.pagetotal = res.data.total
                 this.loading = false
                //  console.log(this.pagetotal)
                } else if(res.statusCode ===201) {
                 this.finishList= []
                 this.loading = false
                } else {
                    this.loading = false
                 this.$message.error('获取列表失败');
                }
            })
        },
        // 点击搜索
        searchbtn() {
            this.pagenum = 1
            this.initFinishList()
        }
    }

}
</script>

<style lang="scss" scoped>
   .el-table {
    cursor: pointer !important;
}
    .el-input__inner {
        width: 200px !important;
    }

.el-table_3_column_11,.is-leaf {
    height: 40px;
}
.el-main {
    line-height: 1;
}
    .newBtn {
        display: inline;
        float: right;
        border:1px solid rgba(64,131,231,1);
        border-radius:8px;
        width: 109px;
        height: 30px;
        line-height: 30px;
        margin-right: 44px;
        text-align: center;
        margin-top: 20px;
        font-size: 16px;
        color: #4083E7;
        cursor: pointer;
    }
    .newBtnL {
         margin-right: 10px;
    }
    .accounthead {
        position: relative;
        text-align: left;
        width: 100%;
        height: 70px;
        background-color: #fff;
        font-size: 22px;
        line-height: 86px;
        // border-bottom: 1px solid #ccc;
        img {
            margin-left: 20px;
        }
        span {
            position: absolute;
            bottom: -9px;
            left: 60px;
            // margin-bottom: 10px;
            // margin-left: 19px;
        }
    }
    .searchbox{
         height: 40px;
         background-color: #fff;
        position: relative;
        .searchInput {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            margin: 0 auto;
            width: 327px;
        }
        .searchBtn {
           background-color: #f5f7fa;
        }
    }
    .pagebox {
        width: 100%;
        height: 48px;
        background-color: #fff;
    }
    .page {
        background: #fff;
        float: right;
        .pageInput {
            margin: 0 10px;
            height: 20px;
            width: 38px;
        } 
    }
    .angle {
        display: inline-block;
        transform:rotate(-90deg);
        cursor: pointer;
    }
</style>

